<template>
  <div class="detail_container">
    <div class="head_title" v-if="!detailForm.id">创建类别</div>
    <div class="head_title" v-else-if="detailForm.id && isEdit">编辑类别</div>
    <div class="head_title" v-else-if="detailForm.id && !isEdit">查看类别</div>
    <el-divider></el-divider>
    <div class="px-20">
      <el-form :model="params" :disabled="detailForm.id && !isEdit" ref="expertForm" label-width="75px" :rules="rules"
               label-position="left" size="small">


        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="类型" prop="enterpriseInfoType">
              <!--<el-input v-model="params.enterpriseInfoType" placeholder="请输入类型ID"/>-->
              <el-select v-model="params.enterpriseInfoType" placeholder="请选择类型">
                <el-option
                  v-for="dict in dict.type.enterprise_info_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="类别" prop="categoryName">
              <el-select v-model="params.categoryName" placeholder="请选择类别">
                <el-option
                  v-for="dict in dict.type.enterprise_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>


          <!--<el-col :lg="8" :xl="6">
            <el-form-item label="类别名称" prop="categoryName" label-width="80px">
              <el-input v-model="params.categoryName" placeholder="请输入类别名称"/>
            </el-form-item>
          </el-col>-->

        </el-row>

        <el-row>
          <el-col :lg="8" :xl="6">
            <el-button type="primary" @click="addDomain">新增经营范围</el-button>
            <el-form-item
              v-for="(domain, index) in params.zpBusinessScopeList"
              :label="'经营范围'"
              :key="domain.businessScopeName"
              :value="domain.businessScopeName"
              :prop="'zpBusinessScopeList.' + index + '.businessScopeName'"
            >
              <el-input v-model="domain.businessScopeName"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="flex p-20">
      <el-button @click="sureForm('expertForm')" type="primary" v-if="!detailForm.id || isEdit">确认提交</el-button>
      <el-button @click="isEdit = true" type="primary" v-if="detailForm.id && !isEdit">编辑</el-button>
      <el-button @click="show = false">返回</el-button>
    </div>
  </div>
</template>

<script>

  export default {
    dicts: ['enterprise_info_type','enterprise_category'],
    data() {
      return {
        params: {
          id: null,
          enterpriseInfoType: null,
          categoryName: null,
          createId: null,
          createBy: null,
          createTime: null,
          updateId: null,
          updateBy: null,
          updateTime: null,
          delFlag: null,
          zpBusinessScopeList: [
            {
              businessScopeName: null
            }
          ]
        },
        rules: {
          enterpriseInfoType: [
            {required: true, message: "类型ID不能为空", trigger: "blur"}
          ],
          categoryName: [
            {required: true, message: "类别名称不能为空", trigger: "blur"}
          ]
        },
      }
    },
    props: {
      editVisible: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      detailForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isEdit: {
        type: Boolean,
        default: () => {
          return false
        }
      },
    },
    watch: {},
    computed: {
      show: {
        get() {
          return this.editVisible
        },
        set(val) {
          this.$emit('update:editVisible', val)
        }
      },
    },
    created() {
      if (this.detailForm.id) {
        this.params = {...this.detailForm}
      }
    },
    methods: {
      // 确认
      sureForm(formName) {
        this.$refs [formName].validate((valid) => {
          if (valid) {
            if (this.detailForm.id) {
              this.$emit('submitForm', this.params, this.detailForm.id)
            } else {
              this.$emit('submitForm', this.params)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      removeDomain(item) {
        var index = this.params.zpBusinessScopeList.indexOf(item)
        if (index !== -1) {
          this.params.zpBusinessScopeList.splice(index, 1)
        }
      },
      addDomain() {
        this.params.zpBusinessScopeList.push({
          businessScopeName: '',
          key: Date.now()
        });
      }

    }

  }
</script>

<style scoped="scoped" lang="scss">
  .titile_txt {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 19px;
    margin-bottom: 15px;
  }
</style>
